<!--
 * @Author: Charles_XDXD
 * @Description: 首页
-->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <a-carousel
      arrows
      v-if="carouselList.length > 0"
    >
      <template #prevArrow>
        <div
          class="custom-slick-arrow"
          style="left: 10px; z-index: 1"
        >
          <left-circle-outlined />
        </div>
      </template>

      <template #nextArrow>
        <div
          class="custom-slick-arrow"
          style="right: 10px"
        >
          <right-circle-outlined />
        </div>
      </template>

      <div
        class="carousel-item"
        v-for="item in carouselList"
        @click="locateToDetail(item.videoId)"
      >
        <a-image
          :preview="false"
          :src="item.thumbnailUrl"
          alt="视频缩略图"
          width="100%"
          height="500px"
        />

        <div class="carousel-info">
          <h3 class="carousel-title">{{ item.title }}</h3>
          <div
            v-if="item.description"
            class="carousel-description"
            :title="item.description"
          >
            {{ item.description }}
          </div>
        </div>
      </div>
    </a-carousel>
    <div
      v-else
      class="no-data-placeholder"
      >暂无轮播图</div
    >

    <!-- 热门内容推荐 -->
    <div class="video-gallery">
      <div class="video-gallery-header">
        <div class="video-gallery-title">
          <h2 style="cursor: default">
            <strong>热门内容</strong>
          </h2>
        </div>
        <div class="video-gallery-more">
          <a-button
            type="default"
            @click="locateToMenu"
          >
            更多
          </a-button>
        </div>
      </div>

      <div class="video-list">
        <div
          class="video-item"
          v-for="video in videoHotList"
          :key="video.id"
        >
          <div
            class="video-container"
            @click="locateToDetail(video.id)"
          >
            <img
              :src="video.thumbnailUrl"
              alt="视频缩略图"
            />

            <div class="video-container-info">
              <span class="play-count"
                ><PlayCircleOutlined /> {{ formatNumber(video.viewCount) }}</span
              >
            </div>
          </div>

          <a-button
            type="link"
            class="video-title"
            :title="video.title"
            @click="locateToDetail(video.id)"
          >
            <strong>{{ video.title }}</strong>
          </a-button>

          <a-button
            type="link"
            @click.prevent="goToAuthor(video.userId)"
            class="video-info"
            :title="video.nickname"
          >
            <span class="video-author">
              {{ video.nickname }}
            </span>

            <span class="video-split"> - </span>

            <span class="video-date">
              {{ timeFormat(video.publishTime) }}
            </span>
          </a-button>
        </div>

        <div
          v-if="videoHotList.length === 0"
          class="no-data-placeholder"
        >
          <a-empty />
        </div>
      </div>
    </div>

    <!-- 各类型视频热门推荐 -->
    <div
      class="video-gallery"
      v-for="typeHotList in allTypeVideoHotList"
    >
      <h2 style="cursor: default">
        <strong>{{ typeHotList.type }}</strong>
      </h2>

      <div class="video-list">
        <div
          class="video-item"
          v-for="video in typeHotList.cvVideoItemRespVOList"
          :key="video.id"
        >
          <div
            class="video-container"
            @click="locateToDetail(video.id)"
          >
            <img
              :src="video.thumbnailUrl"
              alt="视频缩略图"
            />

            <div class="video-container-info">
              <span class="play-count"
                ><PlayCircleOutlined /> {{ formatNumber(video.viewCount) }}</span
              >
            </div>
          </div>

          <a-button
            type="link"
            class="video-title"
            :title="video.title"
            @click="locateToDetail(video.id)"
          >
            <strong>{{ video.title }}</strong>
          </a-button>

          <a-button
            type="link"
            @click.prevent="goToAuthor(video.userId)"
            class="video-info"
            :title="video.nickname"
          >
            <span class="video-author">
              {{ video.nickname }}
            </span>

            <span class="video-split"> - </span>

            <span class="video-date">
              {{ timeFormat(video.publishTime) }}
            </span>
          </a-button>
        </div>

        <div
          v-if="typeHotList.cvVideoItemRespVOList.length === 0"
          class="no-data-placeholder"
        >
          <a-empty />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { LeftCircleOutlined, RightCircleOutlined, PlayCircleOutlined } from '@ant-design/icons-vue'
import type { CvVideoItemRespVO, CvVideoItemTypeRespVO } from '@/types/global'
import type { CvVideoCarouselRespVO } from '@/types/carousel'
import { getCarouselList } from '@/api/carousel'
import { getVideoHotList, getAllVideoHotTypeList } from '@/api/video'
import dayjs from 'dayjs'

const router = useRouter()

/**
 * 轮播图列表
 */
const carouselList = ref<CvVideoCarouselRespVO[]>([])

/**
 * 热门内容推荐列表
 */
const videoHotList = ref<CvVideoItemRespVO[]>([])

/**
 * 各类型视频热门推荐列表
 */
const allTypeVideoHotList = ref<CvVideoItemTypeRespVO[]>([])

/**
 * 页面加载时执行的逻辑
 */
onMounted(async () => {
  carouselList.value = await getCarouselList()
  videoHotList.value = await getVideoHotList()
  allTypeVideoHotList.value = await getAllVideoHotTypeList()
})

/**
 * 播放量格式化
 */
const formatNumber = (num: number) => {
  if (!num) {
    return 0
  }

  if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + 'K'
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'W'
  } else {
    return num.toString()
  }
}

/**
 * 时间格式化
 */
const timeFormat = (time: string) => {
  if (time) {
    return dayjs(time).format('YYYY-MM-DD')
  }
  return ''
}

/**
 * 跳转到菜单页面的逻辑
 */
const locateToMenu = () => {
  router.push('/menu')
}

/**
 * 跳转到视频详情页面的逻辑
 */
const locateToDetail = (videoId: number) => {
  window.open(`/video?videoId=${videoId}`)
}

/**
 * 跳转到作者页面的逻辑
 */
const goToAuthor = (userId: number) => {
  window.open(`/profile?userId=${userId}`)
}
</script>

<style scoped>
.home {
  padding: 20px;
}

:deep(.slick-slide) {
  text-align: center;
  height: 500px;
  line-height: 300px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}

.carousel-info {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 10px 30px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carousel-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  height: 40px;
  display: flex;
  align-items: center;
}

.carousel-description {
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-height: 0;
  text-align: left;
}

.carousel-description:empty {
  display: none;
}

.carousel-item {
  height: 500px;
  position: relative;
  cursor: pointer;
}

.video-gallery-header {
  display: flex;
  justify-content: space-between;
}

.video-gallery {
  margin-top: 20px;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
}

.video-item {
  width: 18%;
  margin: 10px;
}

.video-item img {
  width: 100%;
  border-radius: 8px;
  height: 120px;
  cursor: pointer;
}

.video-title {
  font-size: 15px;
  padding: 0;
  color: #000000;
}

.video-info {
  font-size: 14px;
  padding: 0;
  color: #666;
  display: flex;
  align-items: center;
}

.video-info:hover {
  cursor: pointer;
}

.video-split {
  margin: 0 5px;
}

.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.video-container-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.play-count {
  padding: 5px;
}

.no-data-placeholder {
  width: 100%;
  height: 180px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: large;
  color: #666;
  font-weight: bold;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 10px;
}
</style>
